<template>
	<div class="layout-padding">
		<el-tabs v-model="activeName" type="border-card" class="card-tabs h-full" @tab-click="handleClick">
			<el-tab-pane :label="$t('inputoutput.produceRecord')" name="first" class="h-full">
				<div class="layout-padding-auto">
					<el-form :model="state.queryForm" ref="queryRef" :inline="true">
						<el-form-item :label="$t('inputoutput.shiftCode')" prop="shiftCode">
							<el-select v-model="state.queryForm.shiftCode" placeholder="Select" style="width: 160px">
								<el-option v-for="item in shiftCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>

						<el-form-item :label="$t('inputoutput.mesProduceDate')" prop="mesProduceDate">
							<div class="block">
								<el-date-picker
									v-model="mesProduceDate"
									clearable
									type="daterange"
									unlink-panels
									range-separator="To"
									start-placeholder="Start date"
									end-placeholder="End date"
									:shortcuts="shortcuts"
								/>
							</div>
						</el-form-item>

						<el-form-item :label="$t('inputoutput.processCode')" prop="processCode">
							<el-select v-model="state.queryForm.processCode" placeholder="Select" filterable style="width: 160px">
								<el-option v-for="item in processCodeOptions" :key="item.processCode" :label="item.processCode" :value="item.processCode" />
							</el-select>
						</el-form-item>

						<el-form-item :label="$t('inputoutput.produceEndTime')" prop="produceEndTime">
							<div class="block">
								<el-date-picker
									v-model="produceEndTime"
									clearable
									type="daterange"
									unlink-panels
									range-separator="To"
									start-placeholder="Start date"
									end-placeholder="End date"
									:shortcuts="shortcuts"
								/>
							</div>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" icon="search" @click="query">{{ $t('so.query') }}</el-button>
							<el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }}</el-button>
						</el-form-item>
						<br />
						<div style="margin: -5px 0 10px 0">
							<span style="font-size: 14px; font-weight: 600; color: #303133">{{ $t('inputoutput.totalQty') }}：{{ totalQty || 0 }}</span>
						</div>
					</el-form>
					<el-table
						:data="state.dataList"
						highlight-current-row
						v-loading="state.loading"
						border
						style="width: 100%; height: 100%"
						:cell-style="tableStyle.cellStyle"
						stripe
						:header-cell-style="tableStyle.headerCellStyle"
						ref="tableRef"
					>
						<el-table-column type="index" label="#" width="80" />
						<el-table-column prop="barcode" :label="$t('inputoutput.barcode')" show-overflow-tooltip width="120" />
						<el-table-column prop="materialCode" :label="$t('inputoutput.materialCode')" show-overflow-tooltip width="120" />
						<el-table-column prop="materialName" :label="$t('inputoutput.materialName')" show-overflow-tooltip width="200" />
						<el-table-column prop="materialSpec" :label="$t('inputoutput.materialSpec')" show-overflow-tooltip width="300" />
						<el-table-column prop="unit" :label="$t('inputoutput.unit')" show-overflow-tooltip />
						<el-table-column prop="qty" :label="$t('inputoutput.qty')" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="success" effect="plain">
									{{ scope.row.qty }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="outStartDate" :label="$t('inputoutput.produceStartTime')" show-overflow-tooltip width="180" />
						<el-table-column prop="outEndDate" :label="$t('inputoutput.produceEndTime')" show-overflow-tooltip width="180" />
						<el-table-column prop="outDate" :label="$t('inputoutput.mesProduceDate')" show-overflow-tooltip width="180" />
						<el-table-column prop="shift" :label="$t('inputoutput.shiftCode')" show-overflow-tooltip width="150" />
						<el-table-column prop="processCode" :label="$t('inputoutput.processCode')" show-overflow-tooltip width="100" />
						<el-table-column prop="productionLine" :label="$t('inputoutput.productionLineCode')" show-overflow-tooltip width="120" />
						<el-table-column prop="warehouseCode" :label="$t('inputoutput.warehouseCode')" show-overflow-tooltip width="100" />
						<el-table-column prop="warehouseName" :label="$t('inputoutput.warehouseName')" show-overflow-tooltip width="120" />
						<el-table-column prop="restendTime" :label="$t('inputoutput.restendTime')" show-overflow-tooltip width="200" />
						<el-table-column prop="isCreateJob" :label="$t('inputoutput.isCreatJob')" show-overflow-tooltip width="150px">
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isCreateJob === 'Y' ? 'success' : 'danger'" :effect="scope.row.isCreateJob === 'Y' ? 'dark' : 'light'">
									{{ scope.row.isCreateJob }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="reportStatus" :label="$t('inputoutput.reportStatus')" show-overflow-tooltip width="120" />
					</el-table>

					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
				</div>
			</el-tab-pane>
			<el-tab-pane :label="$t('inputoutput.inputRecord')" name="second" class="h-full">
				<inputRecord />
			</el-tab-pane>
			<el-tab-pane :label="$t('inputoutput.consumeRecord')" name="third" class="h-full">
				<consumeRecord />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { reactive, ref } from 'vue';
import { TabsPaneContext } from 'element-plus';
import { getAllProcess, getOutputRecord, GetOutputRecordTotalQty } from '/@/api/platform/report/inputoutput';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const totalQty = ref();
// 引入组件
const inputRecord = defineAsyncComponent(() => import('./input.vue'));
const consumeRecord = defineAsyncComponent(() => import('./consume.vue'));

const activeName = ref('first');
const getYMD = (date: any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const mesProduceDate = ref([endDate, today]);
const produceEndTime = ref([endDate, today]);
// 搜索变量
const queryRef = ref();
const tableRef = ref();
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			return [start, end];
		},
	},
];
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event);
};
//打印机列表
const processCodeOptions = ref();
// 初始化数据
onMounted(() => {
	getAllProcess({}).then((res) => {
		processCodeOptions.value = res.data;
	});
});
//早班晚班选项
const shiftCodeOptions = ref([
	{ label: 'All', value: '' },
	{ label: t('inputoutput.MorningShift'), value: 'MorningShift' },
	{ label: t('inputoutput.EveningShift'), value: 'EveningShift' },
]);
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		StartDate: mesProduceDate.value ? getYMD(mesProduceDate.value[0]) : '',
		EndDate: mesProduceDate.value ? getYMD(mesProduceDate.value[1]) : '',
		StartTime: produceEndTime.value ? getYMD(produceEndTime.value[0]) : '',
		EndTime: produceEndTime.value ? getYMD(produceEndTime.value[1]) : '',
	},
	pageList: getOutputRecord,
});
// 清空搜索条件
const resetQuery = () => {
	//清空下拉框
	state.queryForm.processCode = '';
	state.queryForm.shiftCode = '';
	mesProduceDate.value = [];
	produceEndTime.value = [];
	state.queryForm.StartDate = '';
	state.queryForm.EndDate = '';
	state.queryForm.StartTime = '';
	state.queryForm.EndTime = '';
	getDataList(false);
	totalNum();
};
//搜索
const query = () => {
	state.queryForm.StartDate = mesProduceDate.value ? getYMD(mesProduceDate.value[0]) : '';
	state.queryForm.EndDate = mesProduceDate.value ? getYMD(mesProduceDate.value[1]) : '';
	state.queryForm.StartTime = produceEndTime.value ? getYMD(produceEndTime.value[0]) : '';
	state.queryForm.EndTime = produceEndTime.value ? getYMD(produceEndTime.value[1]) : '';
	totalNum();
	getDataList();
};
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

// 汇总
const totalNum = () => {
	GetOutputRecordTotalQty(state.queryForm).then((res) => {
		totalQty.value = res.data.totalQty;
	});
};
</script>
<style>
/*.card-tabs>.el-tabs__content {
	padding: 2px;
}*/
</style>
